import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import Divider from '@material-ui/core/Divider';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import IconButton from '@material-ui/core/IconButton';
import Typography from '@material-ui/core/Typography';
import CloseIcon from '@material-ui/icons/Close';
import Slide from '@material-ui/core/Slide';


import PropTypes from 'prop-types';
import CssBaseline from '@material-ui/core/CssBaseline';
import useScrollTrigger from '@material-ui/core/useScrollTrigger';
import Box from '@material-ui/core/Box';
import Container from '@material-ui/core/Container';

import Paper from '@material-ui/core/Paper';
import Tabs from '@material-ui/core/Tabs';
import Tab from '@material-ui/core/Tab';
import SwipeableViews from 'react-swipeable-views';

import Table from '@material-ui/core/Table';
import TableBody from '@material-ui/core/TableBody';
import TableCell from '@material-ui/core/TableCell';
import TableHead from '@material-ui/core/TableHead';
import TableRow from '@material-ui/core/TableRow';

import Grid from '@material-ui/core/Grid';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import Checkbox from '@material-ui/core/Checkbox';
import Input from '@material-ui/core/Input';
import InputBase from '@material-ui/core/InputBase';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';

const TabStyles = makeStyles(theme => ({
    root: {
        backgroundColor: theme.palette.background.paper,
        width: '100%',
    },
}));
const GridStyles = makeStyles(theme => ({
    root: {
        alignItems: 'center'
    },
    firstCellGrid: {
        width: 100,
        textAlign: 'right'
    },
    FormControl: {
        display: 'flex',
        width: 300,
    }
}));

const useStyles = makeStyles(theme => ({
    root: {
        flexGrow: 1,
        borderRadius: 0,
    },
    AppBar: {
        height: 48,
        padding: '0 !important',
    },
    Toolbar: {
        height: 48,
        minHeight: 48,
        padding: 0
    },
    button: {
        marginRight: theme.spacing(1.5),
        marginBottom: theme.spacing(1)
    }
}));

const TableStyles = makeStyles(theme => ({
    root: {
        width: '100%',
        marginTop: theme.spacing(1),
        overflowX: 'auto',
    },
    table: {
        // minWidth: 650,
    },
    headCell:{
        fontSize:14,
        color:'#333',
        fontWeight:600
    }
}));
const StepStyles = makeStyles(theme => ({
    step: {
        padding: theme.spacing(1),
        borderLeft:`${theme.spacing(1)}px solid #4761bf`
    },
    text:{
        fontWeight:600
    }
}));

function createData(a, b, c = b, d = c) {
    return { a, b, c, d };
}

const rows = [
    createData('1,1,1', [1, 2, 3]),
    createData('1,2,1', [1, 2, 3]),
    createData('1,3,1', [1, 2, 3]),
    createData('2,1,1', [1, 2, 3]),
];

function SimpleTable() {
    const classes = TableStyles();

    return (
        <Paper className={classes.root}>
            <Table className={classes.table}>
                <TableHead>
                    <TableRow>
                        <TableCell className={classes.headCell}>期 + 苑 + 幢</TableCell>
                        <TableCell className={classes.headCell}>单元</TableCell>
                        <TableCell className={classes.headCell}>层</TableCell>
                        <TableCell className={classes.headCell}>户</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map((row, index) => (
                        <TableRow key={index}>
                            <TableCell component="th" scope="row">
                                {row.a}
                            </TableCell>
                            <TableCell>
                                <FormControl component="fieldset" className={classes.formControl}>
                                    <FormGroup>
                                        {
                                            row.b.map((item,index) =>{
                                                return (
                                                    <FormControlLabel
                                                        key={item}
                                                        control={<Checkbox color="primary" value={item} />}
                                                        label={item+'单元'}
                                                    />
                                                )
                                            })
                                        }
                                    </FormGroup>
                                </FormControl>
                            </TableCell>
                            <TableCell>
                                <FormControl component="fieldset" className={classes.formControl}>
                                    <FormGroup>
                                        {
                                            row.b.map((item,index) =>{
                                                return (
                                                    <InputBase key={index} value="全部"></InputBase>
                                                )
                                            })
                                        }
                                    </FormGroup>
                                </FormControl>
                            </TableCell>
                            <TableCell>
                                <FormControl component="fieldset" className={classes.formControl}>
                                    <FormGroup>
                                        {
                                            row.b.map((item,index) =>{
                                                return (
                                                    <InputBase key={index} value="全部"></InputBase>
                                                )
                                            })
                                        }
                                    </FormGroup>
                                </FormControl>
                            </TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </Paper>
    );
}

function TabPanel(props) {
    const { children, value, index, ...other } = props;

    return (
        <Typography
            component="div"
            role="tabpanel"
            hidden={value !== index}
            id={`full-width-tabpanel-${index}`}
            aria-labelledby={`full-width-tab-${index}`}
            {...other}
        >
            <Box p={2}>{children}</Box>
        </Typography>
    );
}

TabPanel.propTypes = {
    children: PropTypes.node,
    index: PropTypes.any.isRequired,
    value: PropTypes.any.isRequired,
};

function a11yProps(index) {
    return {
        id: `full-width-tab-${index}`,
        'aria-controls': `full-width-tabpanel-${index}`,
    };
}

function ElevationScroll(props) {
    const { children, window } = props;

    // Note that you normally won't need to set the window ref as useScrollTrigger
    // will default to window.
    // This is only being set here because the demo is in an iframe.
    const trigger = useScrollTrigger({
        disableHysteresis: true,
        threshold: 0,
        target: window ? window() : undefined,
    });

    return React.cloneElement(children, {
        elevation: trigger ? 4 : 0,
    });
}

ElevationScroll.propTypes = {
    children: PropTypes.element.isRequired,
    /**
     * Injected by the documentation to work in an iframe.
     * You won't need it on your project.
     */
    window: PropTypes.func,
};



function buildData() {
    return [
        // 1期
        [
            // 苑 | 幢 ,如果是维数组则没有苑，如果是2维数组，则是苑
            [1, 2, 3],
            [1, 2, 3],
            [1, 2, 3],
        ],
        // 2期
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        // 3期
        [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19]
    ]
}



function ElevateAppBar(props) {
    const classes = useStyles();
    const theme = TabStyles();
    const gridStyle = GridStyles();
    const stepStyle = StepStyles();
    const [value, setValue] = React.useState(0);
    const data = buildData();
    function handleChange(event, newValue) {
        setValue(newValue);
    }
    function handleChange(event, newValue) {
        setValue(newValue);
    }

    function handleChangeIndex(index) {
        setValue(index);
    }

    return (
        <React.Fragment>
            <CssBaseline />
            <ElevationScroll {...props}>
                <AppBar className={classes.AppBar}>
                    <Toolbar className={classes.Toolbar}>
                        <Paper className={classes.root}>
                            <Tabs
                                value={value}
                                onChange={handleChange}
                                indicatorColor="primary"
                                textColor="primary"
                                centered
                            >
                                <Tab label="全部住户" {...a11yProps(0)} />
                                <Tab label="筛选住户" {...a11yProps(1)} />
                            </Tabs>
                        </Paper>
                        <div style={{
                            position: 'absolute',
                            right: '16px',
                            zIndex: 1,
                        }}>
                            <IconButton aria-label="close" onClick={props.cancel}>
                                <CloseIcon />
                            </IconButton>
                        </div>
                    </Toolbar>
                </AppBar>
            </ElevationScroll>
            <Toolbar className={classes.Toolbar} />
            {/* 内容 */}
            <Container>
                <Box my={1}>
                    <SwipeableViews
                        axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
                        index={value}
                        onChangeIndex={handleChangeIndex}
                    >
                        {/* 全部住户-内容 */}
                        <TabPanel value={value} index={0} dir={theme.direction}></TabPanel>
                        {/* 筛选住户-内容 */}
                        <TabPanel value={value} index={1} dir={theme.direction}>
                            <Paper className={stepStyle.step}><Typography className={stepStyle.text}> 步骤一：选择覆盖范围，精准到幢</Typography></Paper>
                            <dl style={{ margin: 0 }}>
                                {data.map((item, index) => {
                                    return (
                                        <React.Fragment key={index}>
                                            <dt>{index + 1}期</dt>
                                            <dd>
                                                {
                                                    item[0] instanceof Array
                                                        ? <dl style={{ margin: 0 }}>
                                                            {
                                                                item.map((item, index2) => {
                                                                    return (
                                                                        <React.Fragment key={index + '_' + index2}>
                                                                            <dt>{index2 + 1}苑</dt>
                                                                            <dd>
                                                                                {
                                                                                    item.map((item, index3) => {
                                                                                        return (
                                                                                            <Button className={classes.button} variant="outlined" color="primary" size="small" key={index + '_' + index2 + '_' + index3}>{item}幢</Button>
                                                                                        )
                                                                                    })
                                                                                }
                                                                            </dd>
                                                                        </React.Fragment>
                                                                    )
                                                                })
                                                            }
                                                        </dl>
                                                        // 幢
                                                        : item.map((item, index2) => {
                                                            return (
                                                                <Button className={classes.button} variant="outlined" color="primary" size="small" key={index + '__' + index2}>{item}幢</Button>
                                                            )
                                                        })
                                                }
                                            </dd>
                                        </React.Fragment>
                                    )
                                })}
                            </dl>
                            <Paper className={stepStyle.step}><Typography className={stepStyle.text}> 步骤二：填写层或者户，填写完后点击选择</Typography></Paper>
                            <SimpleTable></SimpleTable>
                        </TabPanel>
                    </SwipeableViews>
                    <Grid container className={gridStyle.root}>
                        <Grid className={gridStyle.firstCellGrid} item>性别：</Grid>
                        <Grid item>
                            {['全部', '男', '女'].map((value, index) => (
                                <FormControlLabel
                                    key={index}
                                    control={
                                        <Checkbox
                                            // checked={state.checkedB}
                                            // onChange={handleChange('checkedB')}
                                            value="checkedB"
                                            color="primary"
                                        />
                                    }
                                    label={value}
                                />
                            ))}
                        </Grid>
                    </Grid>
                    <Grid container className={gridStyle.root}>
                        <Grid className={gridStyle.firstCellGrid} item>年龄：</Grid>
                        <Grid item>
                            {['全部', '25岁以下', '25-35', , '35-45', '45-55', '55岁以上'].map((value, index) => (
                                <FormControlLabel
                                    key={index}
                                    control={
                                        <Checkbox
                                            // checked={state.checkedB}
                                            // onChange={handleChange('checkedB')}
                                            value="checkedB"
                                            color="primary"
                                        />
                                    }
                                    label={value}
                                />
                            ))}
                        </Grid>
                        <Grid item>
                            <Grid container style={{ width: '300px' }}>
                                <Grid item ><Input style={{ width: '50px' }} /></Grid>
                                <Grid item> - </Grid>
                                <Grid item ><Input style={{ width: '50px' }} /></Grid>
                                <Grid item>
                                    <Button size="small" style={{ marginLeft: '12px' }}>
                                        确定
                                    </Button>
                                </Grid>
                            </Grid>
                        </Grid>
                    </Grid>
                    <Grid container className={gridStyle.root}>
                        <Grid className={gridStyle.firstCellGrid} item>发送渠道：</Grid>
                        <Grid item>
                            {['全部', '镜面屏', '小程序'].map((value, index) => (
                                <FormControlLabel
                                    key={index}
                                    control={
                                        <Checkbox
                                            // checked={state.checkedB}
                                            // onChange={handleChange('checkedB')}
                                            value="checkedB"
                                            color="primary"
                                        />
                                    }
                                    label={value}
                                />
                            ))}
                        </Grid>
                    </Grid>
                </Box>
                <Divider />
                <Box style={{ textAlign: 'center', padding: '20px 0' }}>
                    <Button variant="contained" color="primary" onClick={props.handleSend}>
                        确认并发送
                    </Button>
                </Box>
            </Container>
        </React.Fragment>
    );
}


const Transition = React.forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});

export default function FullScreenDialog(props) {
    const [open, setOpen] = React.useState(false);

    function handleClickOpen() {
        setOpen(true);
    }

    function handleClose() {
        setOpen(false);
    }

    return (
        <div>
            <Dialog fullScreen open={props.show} onClose={handleClose} TransitionComponent={Transition}>
                <ElevateAppBar
                    cancel={props.cancel}
                    handleSend={props.handleSend}
                />
            </Dialog>
        </div>
    );
}
